<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>订单详情</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
          name="viewport">
    <link rel="stylesheet" href="statics/css/main.css">
    <link rel="stylesheet" href="statics/css/iview.css">
    <link rel="stylesheet" href="statics/css/syalert.min.css">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="statics/libs/html5shiv.min.js"></script>
    <script src="statics/libs/respond.min.js"></script>
    <![endif]-->
    <style>
        body {
            margin: 0;
            background: RGBA(243, 243, 245, 1);
            font-family: 思源黑体;
            font-size: 0.5rem;
            padding-bottom: 5rem;
        }

        .main-tox {
            margin-bottom: 1rem;
            padding: 0.7rem;
            border-radius: 10px;
            background: #ffffff;
            display: flex;
            flex-direction: column;
        }

        .ding_dan {
            margin-bottom: 1rem;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }

        .ding_dan h4 {
            margin: 0.3rem;
        }

        .xiang_qing {
            margin-top: 0;
            margin-bottom: 1rem;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }

        .xiang_qing img {
            margin-right: 1rem;
            border-radius: 10px;
        }

        .jia {
            display: flex;
            flex-direction: column;
        }

        .jin {
            float: right;
            display: flex;
            justify-content: space-between;
            flex-direction: row;
        }

        .head-box {
            background: #ffffff;
            width: 100vw;
            height: 5vh;
        }

        .body-box {
            padding: 0.5rem;
        }

        .li-box {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            font-size: 0.875rem;
            font-weight: bold;
            color: RGBA(115, 115, 115, 1)
        }

        .l {
            color: RGBA(148, 95, 122, 1);
        }

        .shouhuo {
            padding: 0.7rem;
            font-size: 1rem;
            color: #0C0C0C;
            border-radius: 10px;
            background: #ffffff;
            margin-bottom: 0.5rem
        }

        .tijiao {
            font-size: 1rem;
            color: #0C0C0C;
            background: #ffffff;
            width: 100vw;
            height: 50px;
            position: fixed;
            bottom: 0px;
            z-index: 2;
        }

        .details {
            color: RGBA(94, 94, 94, 1);
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }

        .btn-pai {
            width: 30vw;
            margin: 0.2rem;
            border-radius: 15px;
            padding: 0.4rem;
        }
    </style>
</head>
<body>
<div id="loginBox">
    <div class="head-box">
        <div style="font-size: 1rem;font-weight: bold;margin-left: 0.5rem;display: flex;flex-direction: row;">
            <div style="margin-top: 0.5rem" @click="fan()"><img src="arrow_left.svg" width="24px" height="24px"></div>
            <div style="margin: 0.5rem">订单详情</div>
        </div>
    </div>
    <div class="body-box">
        <div class="shouhuo">
            <div style="font-weight: bold;padding: 1rem;padding-left: 0">收货地址</div>
            <div class="details">
                <div style="display: flex;flex-direction: column"><span v-cloak>{{order.consignee}}</span><span v-cloak>{{order.full_region}}</span>
                </div>
                <div style="margin-top: 1rem" v-cloak>{{order.mobile}}</div>
            </div>
        </div>
        <div class="main-tox">
            <div class="ding_dan">
                <div class="ding">
                    <div style="font-size: 0.875rem;font-weight: bold;margin-bottom:0.2rem;">自营产品</div>
                    <span style="margin-left: 0.1rem;color: RGBA(156, 156, 158, 1)" v-cloak>订单编号 {{order.order_sn}}</span>
                </div>
                <div class="state">
                    <div style="color: RGBA(156, 156, 158, 1);margin-top: 0.8rem;font-size: 0.875rem"
                         v-if="order.transport.transportState==0">未配送
                    </div>
                    <div style="color: RGBA(156, 156, 158, 1);margin-top: 0.8rem;font-size: 0.875rem"
                         v-if="order.transport.transportState==1">配送中
                    </div>
                    <div style="color: RGBA(156, 156, 158, 1);margin-top: 0.8rem;font-size: 0.875rem"
                         v-if="order.transport.transportState==2">已配送
                    </div>
                    <div style="color: RGBA(156, 156, 158, 1);margin-top: 0.8rem;font-size: 0.875rem"
                         v-if="order.transport.transportState==3">已取消
                    </div>
                </div>
            </div>
            <div class="xiang_qing" v-for="(goodItem,index) in order.goodsVoList" :key="index">
                <img :src="goodItem.list_pic_url"
                     width="90px" height="90px" style="margin: 0">
                <div class="ming" style="width: 30vw">
                    <div style="margin: 0;color: RGBA(114, 114, 116, 1);font-weight: bold;line-height: 1.2rem" v-cloak>
                        {{goodItem.goods_name}}
                    </div>
                    <div style="color: RGBA(156, 156, 158, 1);padding: 0.6rem" v-cloak>
                        {{goodItem.goods_specifition_name_value}}
                    </div>
                   <!-- <span style="border-radius: 30px;background-color: RGBA(236, 242, 255, 1);padding: 0.1rem">
                <span style="margin: 0.5rem;color: RGBA(145, 157, 180, 1)">1年保修</span>
            </span>-->
                </div>
                <div class="jia" style="">
                    <div style="display: flex;flex-direction: row;text-align:right;">
                        <span style="color: RGBA(156, 156, 158, 1);margin-top: 0.2rem">优惠后</span>
                        <div style="margin: 0;font-size: 0.875rem;font-weight: bold;color:#5C5C5E" v-cloak>
                            ￥{{goodItem.retail_price}}
                        </div>
                    </div>
                    <span style="text-align:right;color: RGBA(156, 156, 158, 1)" v-cloak>￥{{goodItem.retail_price}}</span>
                    <span style="text-align:right;color: RGBA(156, 156, 158, 1);padding: 0.8rem" v-cloak>x {{goodItem.number}}</span>
                </div>
            </div>
            <div class="jin">
                <span style="margin-right: 1rem;color: RGBA(156, 156, 158, 1)" v-cloak>共 {{order.goodsCount}} 件商品</span>
                <div style="margin: 0;font-size: 0.875rem;font-weight: bold;color: #262326" v-cloak>订单金额 ￥{{order.order_price}}
                </div>
            </div>
        </div>
    </div>
    <div class="tijiao" style="display: flex;flex-direction: row;padding: 0.4rem;justify-content: center">
        <i-button type="ghost" class="btn-pai" @click="state(order.transport.id)" v-if="order.transport.transportState==0">开始派送</i-button>
        <i-button type="ghost" class="btn-pai" @click="end(order.transport.id)" v-if="order.transport.transportState==1">结束派送</i-button>
    </div>
</div>
<script src="statics/libs/jquery.min.js"></script>
<script src="statics/libs/syalert.min.js"></script>
<script src="statics/libs/vue.min.js"></script>
<script src="statics/libs/iview.min.js"></script>
<script src="statics/plugins/layer/layer.js"></script>
<script src="statics/libs/bootstrap.min.js"></script>
<script src="statics/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script src="statics/libs/fastclick.min.js"></script>
</body>
<script type="text/javascript">
    var vm = new Vue({
        el: '#loginBox',
        data: {
            order: {
                order_sn: "123123123",
                transport: {
                    id:1,
                    transportState: 1,
                },
                goodsVoList: [{
                    list_pic_url: "http://yanxuan.nosdn.127.net/1f67b1970ee20fd572b7202da0ff705d.png",
                    goods_name: "手机",
                    number: 123123,
                    retail_price: "123",
                    goods_specifition_name_value: "",
                }],
                orderState: 1,
                consignee: 'lisi',
                mobile: 123213,
                full_region: 11231213,
                goodsCount: 1,
                order_price: 1000,
            },
        },
        beforeCreate: function () {
            getOrder(getUrlParam("id"))
        },
        methods: {
            fan() {
                window.history.back(-1);
            },
            state(id){
                $.ajax({
                    type: "GET",
                    url: "sys/transport/startTransport/" + id,
                    dataType: "json",
                    success: function (result) {
                        if (result.errno == 0) {
                            layer.alert('操作成功', function (index) {
                                location.reload();
                            });
                        }else{
                            layer.alert("操作失败");
                        }
                    }
                });
            },
            end(id){
                $.ajax({
                    type: "GET",
                    url: "sys/transport/endTransport/" + id,
                    dataType: "json",
                    success: function (result) {
                        if (result.errno == 0) {
                            layer.alert('操作成功', function (index) {
                                location.reload();
                            });
                        }else{
                            layer.alert("操作失败");
                        }
                    }
                });
            }
        }
    });

    function getOrder(id) {
        $.ajax({
            type: "GET",
            url: "sys/transport/getById/" + id,
            dataType: "json",
            success: function (result) {
                if (result.errno == 0) {
                    vm.order = result.data;
                }else{
                    layer.alert("查询失败");
                }
            }
        });

    }

    function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) {
            return unescape(r[2]);
        } else {
            return null;
        }
    }
</script>
</html>
